DeepWiki

07 - Frontend-Architecture

Relevant source files

This document describes the Next.js 14-based frontend implementation of godeep.wiki. It covers the App Router structure, root layout configuration, theming system based on oklch color space, reusable UI components, and animation utilities. For information about the backend API routes, see Authentication & GitHub Integration and Payment Processing. For details about the user-facing page flows, see User Journey.

The application uses Next.js 14's App Router architecture with a minimal route structure. The app/ directory contains all routes and layouts, following the file-system-based routing convention.

Sources: app/layout.tsx L1-L82

app/page.tsx L1-L214

app/globals.css L1-L158

app/icon.tsx L1-L39

The application has only one primary user-facing route:

All routes share the root layout defined in app/layout.tsx L58-L81

The RootLayout component in app/layout.tsx L58-L81

provides the application-wide structure, metadata, font loading, and third-party integrations.

FeatureImplementationLocation
HTML Classdark (forces dark mode)app/layout.tsx L66
Font SystemGeist Sans & Geist Monoapp/layout.tsx L3-L9
AnalyticsVercel Analyticsapp/layout.tsx L4-L69
MonitoringCloudflare Web Analyticsapp/layout.tsx L70-L77
MetadataSEO, Open Graph, Twitter Cardapp/layout.tsx L11-L56

The application defines comprehensive metadata for SEO optimization:

Sources: app/layout.tsx L11-L56

Key metadata elements:

The layout integrates two external services:

  1. Vercel Analytics (app/layout.tsx L69 ): Provides page view and Web Vitals tracking
  2. Cloudflare Web Analytics (app/layout.tsx L70-L77 ): Uses beacon token from NEXT_PUBLIC_CF_BEACON_TOKEN environment variable

Both integrations use the afterInteractive loading strategy to avoid blocking page rendering.

Sources: app/layout.tsx L58-L81

Theme System & Color PaletteLink copied!

The application uses a sophisticated theming system based on the oklch color space, which provides perceptually uniform colors with better support for wide-gamut displays compared to traditional RGB or HSL.

Sources: app/globals.css L6-L75

The theme defines multiple layers of color tokens:

Semantic Color Tokens (app/globals.css L7-L40

):

  • --background / --foreground: Base colors (white/black)
  • --primary / --primary-foreground: Main brand colors
  • --secondary / --secondary-foreground: Secondary UI elements
  • --muted / --muted-foreground: Subdued text and backgrounds
  • --accent / --accent-foreground: Accent colors for highlights
  • --destructive / --destructive-foreground: Error states

UI Component Tokens (app/globals.css L9-L25

):

  • --card / --card-foreground: Card backgrounds and text
  • --popover / --popover-foreground: Popover/modal styling
  • --border: Border colors
  • --input: Input field borders
  • --ring: Focus ring colors

Chart Colors (app/globals.css L26-L30

): Five distinct colors for data visualization:

  • --chart-1 through --chart-5

All colors use the oklch format: oklch(L C H) where:

  • L (Lightness): 0-1 scale (0 = black, 1 = white)
  • C (Chroma): Color intensity (0 = grayscale)
  • H (Hue): 0-360 degrees

Example from app/globals.css L7

:

--background: oklch(1 0 0);        /* Pure white: L=1, no chroma */--foreground: oklch(0.145 0 0);    /* Dark gray: L=0.145, no chroma */

The application forces dark mode via the dark class on the <html> element (app/layout.tsx L66

). Dark mode overrides are defined in app/globals.css L42-L75

inverting lightness values:

TokenLight ModeDark Mode
--backgroundoklch(1 0 0) (white)oklch(0.145 0 0) (dark)
--foregroundoklch(0.145 0 0) (dark)oklch(0.985 0 0) (light)
--primaryoklch(0.205 0 0)oklch(0.985 0 0)
--muted-foregroundoklch(0.556 0 0)oklch(0.708 0 0)

Sources: app/globals.css L6-L75

The @theme inline directive (app/globals.css L77-L116

) maps CSS custom properties to Tailwind CSS tokens:

--color-background: var(--background);--color-foreground: var(--foreground);--radius-lg: var(--radius);

This enables Tailwind utilities like bg-background, text-foreground, and rounded-lg to use the theme system.

Sources: app/globals.css L77-L116

The application includes five reusable UI components that implement the visual design system. All components are client-side ("use client") to support interactivity.

Sources: app/page.tsx L1-L214

components/background-reveal.tsx L1-L18

components/fade-in.tsx L1-L55

components/beam-button.tsx L1-L26

components/icon-glow.tsx L1-L20

components/spotlight-card.tsx L1-L68

Location: components/beam-button.tsx L1-L26

A call-to-action button with animated gradient border effect on hover.

Key Features:

Props Interface:

interface BeamButtonProps extends React.ComponentProps<typeof Button> {    children: React.ReactNode}

Usage in Landing Page: app/page.tsx L63-L66

app/page.tsx L182-L184

Sources: components/beam-button.tsx L1-L26

Location: components/spotlight-card.tsx L1-L68

An interactive card that displays a radial gradient spotlight effect following the user's cursor.

Implementation Details:

CSS Mask Usage:

maskImage: `radial-gradient(200px circle at ${position.x}px ${position.y}px, black, transparent)`,WebkitMaskImage: `radial-gradient(200px circle at ${position.x}px ${position.y}px, black, transparent)`,

Usage in Landing Page: app/page.tsx L117-L122

  • wraps six feature cards in "What You Get" section

Sources: components/spotlight-card.tsx L1-L68

Location: components/icon-glow.tsx L1-L20

A wrapper that adds an animated glow effect to icons on hover.

Implementation:

Usage in Landing Page: app/page.tsx L75-L77

app/page.tsx L81-L83

app/page.tsx L96-L98

  • wraps GitHub, Brain, and FileText icons

Sources: components/icon-glow.tsx L1-L20

Location: components/fade-in.tsx L1-L55

A scroll-triggered animation wrapper that fades in and slides up content when it enters the viewport.

Implementation Strategy:

  • IntersectionObserver: Detects when element enters viewport (components/fade-in.tsx L17-L28 ) * rootMargin: "0px 0px -50px 0px": Triggers 50px before element reaches bottom of viewport * threshold: 0.1: Triggers when 10% of element is visible
  • Animation Control: Sets animationPlayState to "running" when visible (components/fade-in.tsx L48 )
  • Custom Keyframes: Uses animate-enter class defined in app/globals.css L128-L144

Props:

interface FadeInProps {    children: React.ReactNode    className?: string    delay?: number        // Milliseconds    duration?: number     // Seconds}

Usage Pattern in Landing Page: Wraps all major sections with staggered delays:

Sources: components/fade-in.tsx L1-L55

app/globals.css L128-L144

Location: components/background-reveal.tsx L1-L18

A decorative background effect that animates six vertical panels revealing from top to bottom.

Implementation:

Animation Keyframes:

@keyframes reveal-down {  0%   { clip-path: inset(0 0 100% 0); }  /* Hidden */  100% { clip-path: inset(0 0 0 0); }     /* Fully revealed */}

Usage: Single instance at the root of the landing page (app/page.tsx L15

)

Sources: components/background-reveal.tsx L1-L18

app/globals.css L146-L158

Landing Page ArchitectureLink copied!

The landing page (/) is the primary user entry point, implemented in app/page.tsx L1-L214

It is a server component that imports client components for interactivity.

Page Structure OverviewLink copied!

Sources: app/page.tsx L1-L214

Location: app/page.tsx L17-L28

Components:

Location: app/page.tsx L32-L69

Elements (all wrapped in FadeIn with staggered delays):

  1. Status Badge (app/page.tsx L35-L38 ): * Text: "Think Deep Research for GitHub" * Pulsing blue dot indicator * Border with blur backdrop
  2. Main Heading (app/page.tsx L42-L44 ): * Text: "Your Private Code Wiki" * Gradient text: from-slate-100 to-slate-400 * Font size: text-6xl md:text-8xl
  3. Subheading (app/page.tsx L47-L58 ): * Links to external DeepWiki site (app/page.tsx L49-L56 ) * Orange accent color with hover effects * Underline decoration
  4. Primary CTA (app/page.tsx L61-L67 ): * BeamButton component * Form with createCheckoutSession server action (app/page.tsx L62 ) * Text: "Generate DeepWiki — $10"

Location: app/page.tsx L72-L102

Three-column grid showcasing the user workflow:

StepIconTitleExternal Link
1GitHubConnect GitHub-
2BrainDevin analyzesdevin.ai/pricing
3FileTextDownload DeepWiki-

Each icon is wrapped in IconGlow component for hover effects.

Sources: app/page.tsx L72-L102

Location: app/page.tsx L105-L126

Grid of six SpotlightCard components displaying deliverables:

Grid Configuration:

  • Mobile: grid-cols-2
  • Desktop: md:grid-cols-3
  • Each card has 50ms staggered delay (app/page.tsx L116 )

Sources: app/page.tsx L105-L126

Location: app/page.tsx L129-L170

Two-column layout with four benefit items:

IconBenefitDescription
ZapFaster onboarding"Understand new codebases in minutes, not days"
BrainLLM-ready"Perfect context for Claude, GPT-4, or other AI coding assistants"
LayersDeeper understanding"See the hidden connections and architecture clearly"
ClockSaves hours"Skip the manual reading and diagramming"

Location: app/page.tsx L173-L194

Content:

Location: app/page.tsx L198-L210

Elements:

Sources: app/page.tsx L198-L210

The application uses a custom animation system built on CSS keyframes and the Web Animations API via IntersectionObserver.

Sources: components/fade-in.tsx L16-L39

app/globals.css L128-L158

Enter Animation

Location: app/globals.css L128-L144

Used by FadeIn component to create fade-in with upward slide:

@keyframes enter {  0% {    opacity: 0;    transform: translateY(10px);    filter: blur(4px);  }  100% {    opacity: 1;    transform: none;    filter: none;  }}

Properties:

  • Duration: Configurable via prop (default 0.5s)
  • Easing: Default browser easing
  • Fill mode: both (maintains end state)

Reveal Down Animation

Location: app/globals.css L146-L158

Used by BackgroundReveal component for vertical panel reveal:

@keyframes reveal-down {  0%   { clip-path: inset(0 0 100% 0); }  100% { clip-path: inset(0 0 0 0); }}

Properties:

  • Duration: 1s
  • Easing: cubic-bezier(0.77, 0, 0.175, 1) (custom ease-in-out)
  • Fill mode: both

The FadeIn component uses IntersectionObserver with specific thresholds:

Configuration (components/fade-in.tsx L24-L27

):

{  rootMargin: "0px 0px -50px 0px",  // Trigger 50px before viewport bottom  threshold: 0.1,                    // Trigger at 10% visibility}

Behavior:

  • Early Trigger: The negative bottom margin causes animations to start before elements are fully visible
  • One-Time Execution: Observer disconnects after first trigger (components/fade-in.tsx L21 )
  • Paused State: Animation starts paused and runs only when isVisible is true (components/fade-in.tsx L48 )

Sources: components/fade-in.tsx L16-L39

app/globals.css L128-L158

The application generates its favicon dynamically using Next.js's ImageResponse API.

Location: app/icon.tsx L1-L39

Configuration:

Design:

  • Black background with white "D" letter
  • Centered with flexbox
  • 8px border radius
  • Font size: 24px, weight: 800

Sources: app/icon.tsx L1-L39

Landing Page → Checkout FlowLink copied!

The landing page integrates with the payment system through server actions.

Sources: app/page.tsx L62-L66

app/page.tsx L181-L185

The createCheckoutSession function is imported from ./actions (app/page.tsx L5

) and executed when either payment form is submitted. For implementation details, see Stripe Checkout Creation.

This frontend architecture prioritizes visual polish and user experience through sophisticated animations, interactive components, and a carefully designed color system. All components are designed for dark mode with the oklch color space providing precise, perceptually uniform colors. The minimal route structure and server-first approach via Next.js App Router keep the bundle size small while maintaining interactivity through strategic client component usage.

Refresh this wiki

Last indexed: 23 November 2025 (922b35)

On this page

Ask Devin about godeep.wiki-jb

Syntax error in text

mermaid version 11.4.1

07 - Frontend-Architecture | DeepWiki | godeep.wiki